<!--
 * @Author: leo
 * @Date: 2024-06-11 09:06:10
 * @LastEditors: leo
 * @LastEditTime: 2024-09-29 10:25:13
 * @Description: 
-->
<template>
  <el-tooltip
    v-bind="props.toolTipOptions"
    :popper-class="!toolTipShow ? 'hide-tooltip tooltip-popper' : 'tooltip-popper'"
  >
    <template #content>
      <div class="tooltip-content" :style="{ maxWidth: maxPopWidth + 'px' }">
        {{ props.content }}
      </div>
    </template>
    <div
      :class="{ 'text-auto-wrap': props.wrap, 'text-auto-nowrap': !props.wrap }"
      ref="textAutoRef"
      :style="{
        '-webkit-line-clamp': props.lineClamp,
        'line-clamp': props.lineClamp
      }"
    >
      {{ props.content }}
    </div>
  </el-tooltip>
</template>

<script setup>
import { onMounted, defineProps, ref, computed } from 'vue'

const props = defineProps({
  toolTipOptions: {
    type: Object,
    default: () => ({
      content: 'Bottom center',
      placement: 'bottom',
      effect: 'dark',
      trigger: 'hover'
    })
  },
  content: {
    type: String,
    default:
      'test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字'
  },
  lineClamp: {
    type: Number,
    default: 2
  },
  wrap: {
    type: Boolean,
    default: true
  },
  maxWidth: {
    type: Number,
    default: 200
  }
  // ...
})

const textAutoRef = ref(null)

const lineClampValue = ref(1)

const toolTipShow = ref(false)

const showText = ref(
  ' test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测test这是一段测试文字test这是一段测试文字test这是一段测test这是一段测试文字test这是一段测试文字test这是一段测test这是一段测试文字test这是一段测试文字test这是一段测test这是一段测试文字test这是一段测试文字test这是一段测'
)

const maxPopWidth = computed(() => {
  if (textAutoRef.value) {
    return textAutoRef.value.clientWidth * 0.5
  } else {
    return '100%'
  }
})

onMounted(() => {
  console.log(textAutoRef.value.scrollWidth, textAutoRef.value.clientWidth)
  if (!props.wrap && textAutoRef.value.scrollWidth >= textAutoRef.value.clientWidth) {
    console.log('溢出w')
    console.log(textAutoRef.value.scrollWidth, textAutoRef.value.clientWidth)
    toolTipShow.value = true
  } else if (props.wrap && textAutoRef.value.scrollHeight > textAutoRef.value.clientHeight) {
    console.log('溢出h', textAutoRef.value.scrollHeight, textAutoRef.value.clientHeight)
    toolTipShow.value = true
  } else {
    toolTipShow.value = false
  }
})
</script>

<style lang="less" scoped>
.text-auto-nowrap {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  // display: -webkit-box;
  // -webkit-line-clamp: v-bind(lineClamp);
  // -webkit-box-orient: vertical;
}
.text-auto-wrap {
  width: 100%;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
</style>
<style>
.hide-tooltip {
  visibility: hidden !important;
}
</style>
